afterCancelBatch

Description

If the List is being synchronized in batches, fires after the user has clicked the 'Cancel' button to stop sending batches of records to the server to synchronize.

What is a Batch?

In a disconnected application a user might have been disconnected for quite some time, during which they may have done a fair number of edits on their client-side device. When they get their connection back, the user might then click on a synchronize button in order to add their edits back to the server. However, because they made a large number of edits, it is quite likely that the server might take a while to actually process all of the changes that the user made. While the server is processing information it is likely that the user/client would be waiting for a response and, if the server takes to long, might even time out before recieving said response. One way to avoid this problem is to send the edits made in 'batches' to the server, such that the user can get feedback as to what progress has been made. For a complete guide to setting up a detail view that uses batches to synchronize with a server see the Synchronization using Batches page.

The Cancel Button

images/cancelsynch.png

A Cancel button can be used to stop sending batches. This button can easily be defined on the Detail View pane in the list builder by clicking the button next to the 'Synchronization progress properties' property.

images/cancel2.png

Tie a Message Box to an afterCancelBatch Event

Once the Cancel button is defined an afterCancelBatch event can be defined using javascript; to specify what happens after the Cancel button is clicked.

  1. Build a detail view that has a synchronization button. The guide on the Synchronization using Batches page has instructions on how to do this.

    images/cancel5.png
  2. On the Detail View pane of the List Builder under Client-side Events, click the button next to the 'Events' property.

    images/cancel3.png
  3. Highlight the afterCancelBatch event and click the Action Javascript button.

    images/cancel6.png
  4. Click Create/Edit Javascript Action.

    images/cancel7.png
  5. Click Add New Action. Give the new action a name like cancelMessage and click OK

    images/cancel8.png
  6. Click the Edit Action Button

    images/cancel9.png
  7. Click the green '+' or Add New Action button.

    images/cancel10.png
  8. From the Actions list select 'Message Box' and click OK

    images/cancel12.png
  9. Check the 'Use advanced message box' property.

    images/cancel11.png
  10. Click the next to the Message box title property to open the HTML editor. Define some HTML for the message box title. Click Save.

    images/cancel13.png
  11. Click the next to the Message box text property to open the HTML editor. Add some text to the message box. Click Save

  12. In the List Control - Detail View - System Events page, click the 'Action Javascript' button again. This time select the "Insert code to run a Javascript Action" option, then click on the message box action that you defined.

    images/cancel5.png
  13. Click OK to get back to the UX Builder. Run the component in Live Preview. Highlight rows in the list control and make a number of edits in the detail view. Dirty fields will display yellow triangles in the List control.

    images/cancel4.png
  14. Click the Save and Synchronize buttons. The status bar at the top of the component should start and the 'Cancel' button should become active. Click the Cancel button before the synchronization finishes.

    images/break3.png
  15. You should see the message box that you defined appear.

    images/break2.png

See Also